import React from "react";
import ReactDom from 'react-dom'
import { Route, HashRouter, Link, Switch } from "react-router-dom";
import router from './router' //路由
// mobx
import { Provider } from "mobx-react"
import store from "./store"

//公共组件
import SliderMenu from "@/layout/SlideMenu"
import NavigationBar from "@/layout/NavigationBar"
import Breadcrumb from "@/components/Breadcrumb"


import styles from "@/app.module.less"
class App extends React.Component {
    render() {
        return (
            <div>
                {/* 注入store,这样其他文件就能访问store仓库了 */}
                <Provider {...store}>
                    {/* history模式 */}
                    <HashRouter>
                        <div className={styles.appContainer}>
                            <NavigationBar />
                            <div className={styles.appContent}>
                                <SliderMenu />
                                <div className={styles.container}>
                                    <div className={`${styles.test1} ${styles.test2}`}>
                                        面包屑 <Breadcrumb />
                                    </div>
                                    <Switch>
                                        {
                                            router.map((route) => {
                                                return (
                                                    <Route
                                                        key={route.path}
                                                        exact={route.exact || false}
                                                        path={route.path}
                                                        render={props => (
                                                            <route.component {...props} routes={route.routes || null} />
                                                        )}
                                                    />
                                                )
                                            })
                                        }
                                    </Switch>
                                </div>
                            </div>
                        </div>
                    </HashRouter>
                </Provider>
            </div>
        )
    }
}
ReactDom.render(<App />, document.getElementById('app'))